<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    canvas{
      background-color: #eeeeee;
    }
  </style>
</head>
<body>
  <canvas id='canvas' width='600' height='400'></canvas>
</body>
</html>
<script>
  let canvas = document.getElementById('canvas');
  let ctx = canvas.getContext('2d');
  // 画线
  ctx.beginPath();
  ctx.moveTo(0,0);
  ctx.lineTo(100,200);
  ctx.lineTo(100,100);

  //创造线性渐变色
  let grad = ctx.createLinearGradient(0,0,100,0)//(x1,y1,x2,y2) // 线性渐变色
  grad.addColorStop(0,'red')
  grad.addColorStop(0.2,'blue')
  grad.addColorStop(0.6,'green')
  grad.addColorStop(1,'yellow')
  //创造径向渐变色
  let Rad = ctx.createRadialGradient(50,50,10,50,50,100)//(x1,y1,r1,x2,y2,r2) // 线性渐变色
  Rad.addColorStop(0,'red')
  Rad.addColorStop(0.2,'blue')
  Rad.addColorStop(0.6,'green')
  Rad.addColorStop(1,'yellow')

  // ctx.strokeStyle = 'red';//理解成给 线上色 // border-color
  // ctx.fillStyle = 'blue'
  ctx.strokeStyle = grad;//理解成给 线上色 // border-color
  
  ctx.fillStyle = Rad;
  
  ctx.save()
  ctx.lineWidth = 10;
  ctx.lineCap = 'round';// 让线的两端是一个圆角  butt  round square
  ctx.lineJoin = 'round'// ‘bevel  miter  round
  ctx.closePath();// 把终点和起点进行连接
  ctx.stroke();// 理解成给 线上色 // border-color
  
  ctx.shadowColor = '#000';// 阴影颜色
  ctx.shadowBlur = 10; // 模糊半径
  ctx.shadowOffsetX = 20; // 阴影的横向偏移
  ctx.shadowOffsetY = 20;// 阴影的纵向偏移
  ctx.fill();// 理解成background 上色

  ctx.restore()
  ctx.beginPath();
  // ctx.fillRect(200,200,50,60)
  // ctx.rect(200,200,50,60);
  // ctx.fill()
  ctx.strokeRect(20,20,50,60)// ctx.rect  和 ctx.stroke()

  // ctx.clearRect(x0,y0,0,w,h)// 清空指定矩形内的像素

  // ctx.arc(x,y,r,start,end,bol) bol false 顺时针  true 逆时针
  ctx.moveTo(300,200)
  ctx.arc(300,200,100,Math.PI*0.5,Math.PI,true)
  ctx.closePath()
  ctx.strokeStyle = 'blue'

  ctx.stroke()
  // ctx.fill()
  // ctx.isPointInPath(x,y) // 判断x,y这个点是否在 当前的轨迹当中
  ctx.font = "40px 微软雅黑"
  ctx.textAlign = 'start'// 文本起始的位置 center left right
  ctx.fillText("珠峰",40,30)
  ctx.strokeText("珠峰",40,30)

</script>